<template>
    <section class="login">
        <van-nav-bar
                title = ''
                left-text=''
                :right-text= "$t('zhuce.top_right')"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
                :fixed = "true"
        />
        <!-- <img src="../assets/newimg/logo.png" class="img1" alt=""> -->
		<img :src="this.$https.baseUrl + setting.site_logo" class="img1" alt="">
        <img src="../assets/newimg/logobt.png" class="img2" alt="">
		<div class="ul" @click="godenglu()">
			<div class="li">
				<div>{{$t('h_title.login')}}</div>
			</div>
			<div class="li active">
				<div>{{$t('h_title.zhuce')}}</div>
				<i></i>
			</div>
		</div>
		<div class="con">
			<article class="img-t">
			    <article class="article-input">
					<div>
						<img src="../assets/newimg/zhanghu.png" alt="">
					</div>
			        <input type="text" :placeholder="$t('zhuce.username_placeholder')" maxlength="12" minlength="6" v-model="form.name">
			    </article>
			    <article class="article-input">
					<div>
						<img class="img3" src="../assets/newimg/mima.png" alt="">
					</div>
			        <input :type="typePwd" :placeholder="$t('zhuce.password_placeholder')" v-model="form.password" minlength="6" maxlength="12">
			        <van-icon :name="iconPwd" size="22" color="#fff" @click="fun_Pwd"/>
			    </article>
			    <article class="article-input">
					<div>
						<img class="img3" src="../assets/newimg/mima.png" alt="">
					</div>
			        <input :type="typePwd" :placeholder="$t('zhuce.password2_placeholder')" v-model="form.password_confirmation" minlength="6" maxlength="12">
			        <van-icon :name="iconPwd" size="22" color="#fff" @click="fun_Pwd"/>
			    </article>
			    <article class="article-input">
					<div>
						<img class="img4" src="../assets/newimg/shouji.png" alt="">
					</div>
			        <input :type="typePwd" :placeholder="$t('zhuce.qk_password_placeholder')" v-model="form.qk_pwd" minlength="6" maxlength="12">
			        <van-icon :name="iconPwd" size="22" color="#fff" @click="fun_Pwd"/>
			    </article>
			    <article class="article-input" v-show="sms_message == 1">
					<div>
						<img class="img4" src="../assets/newimg/shouji.png" alt="">
					</div>
			        <input type="number" :placeholder="$t('zhuce.phone_placeholder')"v-model="form.phone">
			    </article>
			    <article class="article-input" v-show="sms_message == 1">
					<div>
						<img class="img4" src="../assets/newimg/shouji.png" alt="">
					</div>
			        <input type="text" :placeholder="$t('zhuce.code_placeholder')" v-model="form.code" style="width: 54%;">
			        <i style="color: #f49623;" v-if="fasong == false" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
			        <article v-else>
			            <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>
			        </article>
			    </article>
			    <p><router-link to="/login">{{$t('zhuce.index')}}</router-link> </p>
			    <button @click="fun_sumbit">{{$t('zhuce.zhuce')}}</button>
			    <iframe_alt :show="iframe_show" :type="1" :src="iframe_src" @close="close"></iframe_alt>
			</article>
		</div>
    </section>
</template>

<script>
    import { CountDown } from 'vant'
    import iframe_alt from "@/components/iframe_alt"
    export default {
        name: "zhuce",
        components: {
            [CountDown.name]: CountDown,
            iframe_alt
        },
        data() {
            return {
                time:  60 * 1000 * 2,
                fasong: false,
                sms_message : this.$store.state.config.sms_message,
                form: {
                    name: '',
                    password: '',
                    password_confirmation: '',
                    qk_pwd:'',
                    phone:'',
                    code:'',
					invite_code:''
                },
                typePwd: 'password',
                iconPwd: 'closed-eye',
                iframe_show: false,
                iframe_src: '',
				invite_code:'',
				setting: {},
            }
        },
		mounted() {
		    let _this = this
		    this.$https.fetchPost('/m/sysconfig',{}).then((res) => {
		   		this.setting = res.data;
		        document.title = res.data.site_title
				this.setting = res.data
		        _this.$store.commit('config',res.data)
				this.sms_message = this.$store.state.config.sms_message
		    })
		    this.$i18n.locale = this.$store.state.i18n
		    if(!this.$route.query.i){
		        this.invite_code = localStorage.invite_code;
		    }else{
		        this.invite_code = this.$route.query.i;
		        localStorage.invite_code = this.invite_code;
		    }
		},
        methods: {
			godenglu(){
				this.$router.push('/login')
			},
            close() {
                this.iframe_show = false
            },
            fun_Pwd() { //切换密码的眼睛
                this.typePwd = this.typePwd === 'password' ? 'text' : 'password'
                this.iconPwd = this.iconPwd === 'closed-eye' ? 'eye-o' : 'closed-eye'
            },
            onClickLeft() {
                this.$router.push('/')
            },
            onClickRight() { ///右上下载app
                // window.location.href = this.$store.state.config.app_link
                this.iframe_src = this.$store.state.config.app_link
                this.iframe_show = true
            },
            finish() { //倒计时结束
                this.fasong = false
            },
            fun_huoqu() { //获取短信验证码
                if(this.form.phone == ''){
                    this.$toast(this.$t('zhuce.phone_alert'))
                }
                else{
                    ///处理
                    this.$https.fetchGet('/m/rmsgcode',{'phone': this.form.phone}).then(res => {
                        if(res.status.errorCode == 0){
                            this.$toast(res.status.msg)
                            this.fasong = true
                        }
                        else{
                            this.$toast(res.status.msg)
                        }
                    }).catch(err => {
                        this.$toast('网络异常');
                    })

                }
            },
            fun_sumbit() {
				
				if(this.invite_code){
				    this.form.invite_code=this.invite_code;
				}
                if(this.form.name == ''){
                    this.$toast(this.$t('zhuce.username_alert'))
                }
                else if(this.form.password == ''){
                    this.$toast(this.$t('zhuce.password_alert'))
                }
                else if(this.form.password.length < 6){
                    this.$toast(this.$t('zhuce.password_alert_length'))
                }
                else if(this.form.password_confirmation == ''){
                    this.$toast(this.$t('zhuce.password2_alert'))
                }
                else if(this.form.password != this.form.password_confirmation){
                    this.$toast(this.$t('zhuce.password_alert_buyizhi'))
                }
                else if(this.form.qk_pwd == ''){
                    this.$toast(this.$t('zhuce.qk_password_alert'))
                }
                else if(this.form.qk_pwd.length < 6){
                    this.$toast(this.$t('zhuce.qk_password_alert_length'))
                }
                else if(this.form.phone == '' && this.sms_message == 1){
                    this.$toast(this.$t('zhuce.phone_alert'))
                }
                else if(this.form.code == '' && this.sms_message == 1){
                    this.$toast(this.$t('zhuce.code_alert'))
                }
                else{
                    this.$https.fetchPost('/m/register',this.form).then( res => {
						this.$router.push('/')
                    })
                }
            }
        }
    }
</script>
<style>
	.van-icon-arrow-left:before,.van-nav-bar__text,.van-nav-bar__title{
	    color: #333;
	}
</style>
<style scoped lang="less">
	/deep/.van-nav-bar__right{
		font-size: 12px;
		width: 120px;
		padding: 0px;
		height: 22px;
		position: absolute;
		top: 15px;
		right: 20px;
		border-radius: 2px;
		background-image: linear-gradient(#f6ce38, #dda82d);
		justify-content: center;
	}
	/deep/ .van-nav-bar__left{
		display: none;
	}
	/deep/.van-nav-bar{
	    background-color: transparent;
	    color: #f49623;
	}
	
	/deep/.van-count-down{
	    color: #f49623;
	}
	/deep/.van-hairline--bottom::after {
	     border-bottom-width: 0px; 
	}
    .login{
        height: 100%;
        min-height: 100vh;
        background: url("../assets/newimg/loginbg.png") center no-repeat;
        background-size: cover;
		
		.img1{
			margin: 0 auto;
		    margin-top: 30px;
		    max-width: 290px;
			max-height: 120px;
		}
		.img2{
			width: 97%;
			margin: -10px auto 10px;
		}
		.con{
			margin: 0 17px;
			border: 0;
			border-top-width: 2px;
			border-style: solid;
			border-top-color: #f49623;
		}
        .img-t{
           padding: 24px 20px;
           text-align: right;
           background-color: #303030;
            & > img{
                width: 1rem;
                margin-bottom: .1rem;
            }
            .article-input{
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0 .3rem;
				padding-left: 0;
				overflow: hidden;
				margin-bottom: 12px;
				position: relative;
				border-radius: .2rem;
				div{
					width: 1rem;
					height: 1rem;
					display: flex;
					justify-content: center;
					align-items: center;
					
					img{
					    width: 30px;
					    height: 28px;
					}
					.img3{
						width: 18px;
						height: 18px;
					}
					.img4{
						width: 22px;
						height: 20px;
					}
				}
                input{
                    // width: 78%;
					flex: 1;
					line-height: 1rem;
					background: transparent;
					border:none;
					font-size: .4rem;
					color: #f49623;
                    &::-webkit-input-placeholder {
                        color: #f49623;
                    }
                }
                // &:after{
                //     position: absolute;
                //     content: ' ';
                //     width: 1px;
                //     height: .6rem;
                //     background: rgb(127,127,127);
                //     left: 1.3rem;
                // }
                article{
                    color: #fff;
                    font-size: .4rem;
                    display: flex;
                }
                i{
                    font-size: .4rem;
                    color: #fff;
                }
            }
            .article-btn{
                display: flex;
                justify-content: space-between;
                padding: 0 .4rem;
                margin-bottom: 1rem;
                a{
                    font-size: .4rem;
                }
            }
            & > P{
                text-align: center;
                color: #d2cfcf;
                font-size: .4rem;
                margin-bottom: .8rem;
				
				a{
					color: #fff;
				}
            }
            button{
				width: 100%;
				height: 40px;
				background: linear-gradient(to bottom, #eebf46 0%, #f49321 100%) !important;
				font-size: .4rem;
				border:none;
				color: #fff;
				line-height: 0.9rem;
				border-radius: .2rem;
            }
        }
    }
.ul{
	color: #ffffff80;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.li{
		flex: 1;
		text-align: center;
		height: 42px;
		font-size: 16px;
		font-weight: 600;
		line-height: 42px;
		text-decoration: none;
		color: #999;
		position: relative;
		
		i{
			width: 10px;
			height: 10px;
			position: absolute;
			bottom: 0px;
			left: 48%;
			box-sizing: border-box;
			border-top: 5px solid transparent;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 5px solid  #f49623;
		}
	}
	.li.active{
		color: #fff;
	}
}
</style>
